<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
	<!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<!-- 忽略数字自动识别为电话号码 ,忽略识别邮箱 -->
	<meta name="format-detection" content="telephone=no, email=no" />
	<!-- 启用360浏览器的极速模式(webkit) -->
	<meta name="renderer" content="webkit">
	<!-- 避免IE使用兼容模式 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- uc强制竖屏 -->
	<meta name="screen-orientation" content="portrait" />
	<!-- QQ强制竖屏 -->
	<meta name="x5-orientation" content="portrait">
	<!-- UC强制全屏 -->
	<meta name="full-screen" content="true" />
	<!-- QQ强制全屏 -->
	<meta name="x5-fullscreen" content="true" />
	<!-- 360强制全屏 -->
	<meta name="360-fullscreen" content="true" />
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<script src="js/jquery-1.12.4.js"></script>
	<style>
	a{
		color: #75758A;
	}
		.dtop_nav {
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			position: relative;
			font-size: 18px;
		}
		
		.dtop_nav img {
			width: 20px;
			display: inline-block;
			position: absolute;
			left: 20px;
			top: 15px;
		}
		
		.dtop_nav span {
			display: block;
			width: 100%;
			height: 1px;
			background: #ccc;
		}
		
		.logo_pic {
			width: 80px;
			margin: 0px auto;
			margin-top: 50px;
			margin-bottom: 50px;
		}
		
		.logo_pic img {
			width: 80px;
		}
		
		.blist {
			width: 100%;
			margin-bottom: 50px;
		}
		
		.register_pass,
		.blist form {
			width: 90%;
			margin: 0px auto;
			position: relative;
		}
		
		.blist form input {
			font-size: 18px;
			width: 100%;
			height: 50px;	
			line-height: 50px;		
			margin-bottom: 30px;
			box-sizing: border-box;
			padding-left: 4px;
			border: none;
			border: 1px solid #ccc;
			border-radius: 5px;
			outline: none;
			-webkit-appearance: none;
			background: transparent;
		}
		
		#tjbtn {
			border: none;
			background: linear-gradient(to top, #36BD7B, #47CE69);
			color: white;
			font-size: 16px;
		}
		
		/*.eyes_icon {
			display: block;
			width: 22px;
			height: 16px;
			background: url(img/eyes.png) no-repeat;
			background-size: contain;
			position: absolute;
			right: 12px;
			top: 82px;
		}*/
		
		.passwrong,.wrong{
			display: block;
			width: 100%;
			height: 26px;
			line-height: 26px;
			color: #D81E06;
			font-size: 14px;
			box-sizing: border-box;
			
			
		}
		
		.passwrong{
			position: absolute;
			left: 0px;
			top: 132px;
			padding-left: 26px;			
			display: none;
			/*border: 1px solid red;*/
			background: url(img/ts.png) no-repeat 4px center;
			background-size: 18px;
			
		}
		
		.wrong{
			position: absolute;
			left: 0px;
			top: 53px;
			padding-left: 26px;
			display: none;
			/*border: 1px solid red;*/
			background: url(img/ts.png) no-repeat 4px center;
			background-size: 18px;
			
		}
		
		.txt_login span,
		.register_pass span {
			display: inline-block;
		}
		
		.th_login {
			width: 100%;
		}
		
		.txt_login {
			text-align: center;
			width: 90%;
			height: 30px;
			line-height: 30px;
			margin: 0px auto;
			margin-bottom: 20px;
			/*border: 1px solid red;*/
		}
		
		.txt_login span:first-child,
		.txt_login span:last-child {
			width: 120px;
			height: 1px;
			background: #ccc;
			vertical-align: middle;
		}
		
		.login_icon {
			margin: 0px auto;
			width: 50%;
			text-align: center;
		}
		
		.login_icon img {
			margin-left: 24px;
		}
		
		.login_icon img:first-child {
			width: 22px;
		}
		
		.login_icon img:nth-of-type(2) {
			width: 28px;
		}
		
		.login_icon img:last-child {
			width: 28px;
		}
				
		.visible{		
			display: block;
			width: 22px;
			height: 16px;
			background: url(img/eye.png) no-repeat;
			background-size: contain;
			position: absolute;
			right: 12px;
			top: 99px;						
		}
		
	.invisible{			
			display: block;
			width: 22px;
			height: 16px;
			background: url(img/eyes.png) no-repeat;
			background-size: contain;
			position: absolute;
			right: 12px;
			top: 99px;					
		}
		
		
	</style>

	<body>
		<div class="dtop_nav">
			<img src="img/back.png" onclick="history.back();"/> 登录
			<span></span>
		</div>

		<div class="logo_pic"><img src="img/logo_icon.png" /></div>

		<div class="blist">
			<form>
				<input type="text" name="dnumber" id="phone_number" placeholder="请输入手机号/邮箱" />
				<input type="password" name="passwor" id="passm" placeholder="请输入密码" />
				<input type="button" name="subtn" id="tjbtn" value="登录" />
				<span class="eyes_icon invisible"></span>
				<span class="wrong"></span>
				<span class="passwrong"></span>
			</form>

			<div class="register_pass clearfix">
				<span class="fl"><a href="#" onclick="location.href='register.html';return false">立即注册</a></span>
				<span class="fr"><a href="#">忘记密码</a></span>
			</div>

		</div>

		<div class="th_login">
			<div class="txt_login">
				<span></span>
				<span>第三方登录</span>
				<span></span>
			</div>
			<div class="login_icon">
				<img src="img/qq_icon-4.png" />
				<img src="img/weibo_icon.png" />
				<img src="img/weixin_icon.png" />
			</div>
		</div>
		
		<script>
		          
			$(login_validate);

			function login_validate() {
				  var rightnumb="111";
				  var rightemil="111111@qq.com";
				  var rightpass="123456";	
				  var $phoneval;
				  var $password;
				//输入手机号；
				$("#phone_number").focus(function() {
					$(this).removeAttr("placeholder");
					$(".wrong").hide().html(" ");				
				})          


				$("#phone_number").blur(function() {					
			    $(this).attr("placeholder", "请您输入手机号/邮箱");   		
					
					$phoneval=$(this).val().trim();						  
					  if ($phoneval.length>0&&$phoneval!=rightnumb||$phoneval.length>0&&$phoneval!=rightemil) {
                  	      $(".wrong").show().html("您输入的手机号或邮箱有误");  
                  	      
                }
					  if ($phoneval.length>0&&$phoneval==rightnumb||$phoneval.length>0&&$phoneval==rightemil) {
                  	      $(".wrong").hide();
                  	
              } 							
							 
					})				    
				
				 
				//输入密码；
				
				$("#passm").focus(function() {
					$(this).removeAttr("placeholder");
					$(".passwrong").hide().html(" ");				
				})
				
				
				$("#passm").blur(function() {
					
					 $(this).attr("placeholder", "请输入密码"); 
					
					 $password=$(this).val();					
					
					if ($password.length>0&&$password!=rightpass) {
						$(".passwrong").show().html("密码有误"); 					
					}			
					
					
				})
								
					//登录
				/*alert($password);*/
				$("#tjbtn").click(function() {					
					if ($phoneval==rightnumb&&$password==rightpass) {
						location.href="My.html";
					}
				})			
			
				
				
							//密码可见可不见；
				var passwordeye = $(".eyes_icon");
				var showPwd = $("#passm");
				passwordeye.click(function(){
				   	console.log(1);
				       if(passwordeye.hasClass('invisible')){
				           passwordeye.removeClass('invisible').addClass('visible');				          
				            showPwd.prop('type','text');
				          
				       }else{
				           passwordeye.removeClass('visible').addClass('invisible');
				           showPwd.prop('type','password');
				       };
				   });  
				
				
				
				
			}
		
		</script>
	</body>

</html>